<template>
  <van-popup :show="coupon.coupon" position="bottom" custom-style="height: 55%;background: #F9F9F9;" z-index="300" @close="close">
    <div class="list_title">优惠 <div class="guanbi iconfont icon-guanbi" @click="close"></div></div>
    <div class="popup_list">
      <div class="list_box" v-for="(item, couponIndex) in coupon.list" :key="couponIndex">
        <img class="list_bgimg" v-if="item.isPermanent == 0 && item.remainCount < 1" src="https://zykj-sales.oss-cn-hangzhou.aliyuncs.com/miniprogram/client/static/zymall/voucherbgf.png" alt="">
        <img class="list_bgimg" v-else-if="item.isUse === true" src="https://zykj-sales.oss-cn-hangzhou.aliyuncs.com/miniprogram/client/static/zymall/voucherbgt.png" alt="">
        <img class="list_bgimg" v-else src="https://zykj-sales.oss-cn-hangzhou.aliyuncs.com/miniprogram/client/static/zymall/voucherbgo.png" alt="">
        <div class="list_left">
          <div class="left_money"><span>￥</span>{{item.couponPrice}}</div>
          <div class="left_type">满减券</div>
        </div>
        <div class="list_right">
          <div class="right_condition">购物满{{item.useMinPrice}}元可用</div>
          <div class="right_bottom">   
            <div class="bottom_time" v-if="item.endTime !== 0">
              <data-format-t :data="item.startTime"></data-format-t>-
              <data-format-t :data="item.endTime"></data-format-t>
            </div>
            <div class="bottom_time" v-else>不限时</div>
            <div class="finish button" v-if="item.isPermanent == 0 && item.remainCount < 1">已领完</div>
            <div class="employ button" @tap="close" v-else-if="item.isUse === true">立即使用</div>
            <div class="receive button" v-else @click="getCouponUser(couponIndex,item.id)">立即领取</div>
          </div>
        </div>
      </div>
    </div>
  </van-popup>
</template>
<script>
import DataFormatT from "@/components/DataFormatT";
import { getCouponReceive } from "@/api/user";
export default {
  name: "CouponPop",
  components: {
    DataFormatT,
  },
  props: ["coupon"],
  data: function() {
    return {};
  },
  mounted: function() {},
  methods: {
    close: function() {
      this.$emit("changeFun", { action: "changecoupon", value: false }); //$emit():注册事件；
    },
    getCouponUser: function(index, id) {
      let that = this,
        list = that.coupon.list;
      if (list[index].is_use === true) return;
      getCouponReceive(id).then(function() {
        that.$dialog.toast({ mes: "已领取" });
        that.$set(list[index], "is_use", true);
        that.$emit("changeFun", { action: "currentcoupon", value: index });
        // that.$emit("changeFun", { action: "changecoupon", value: false });
      });
    }
  }
};
</script>

<style lang="less" scoped>
  .list_title{
    position: fixed;
    height: 100rpx;
    width: 750rpx;
    display: flex;
    background-color: #f9f9f9;
    justify-content: center;
    align-items: center;
    color: #333333;
    z-index: 1;
    font-size: 28rpx;
  }
  .guanbi{
    height: 100rpx;
    width: 100rpx;
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 36rpx;
    color: #999999;
  }
  .popup_list{
    margin: 100rpx 30rpx 25rpx 30rpx;
    .list_box{
      width: 690rpx;
      height: 186rpx;
      position: relative;
      margin-bottom: 25rpx;
      .list_bgimg{
        width: 690rpx;
        height: 186rpx;
      }
      .list_left{
        position: absolute;
        left: 0;
        top: 0;
        height: 186rpx;
        width: 216rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column; 
        .left_money{
          color: #FFFFFF;
          font-size: 66rpx;
          margin-bottom: 10rpx;
          span{
            font-size: 30rpx;
          }
        } 
        .left_type{
          margin-bottom: 10rpx;
          color: #ffffff;
          font-size: 24rpx;
        }      
      }
      .list_right{
        right: 0;
        position: absolute;
        top: 0;
        height: 186rpx;
        width: 450rpx;
        .right_condition{
          color: #333333;
          font-size: 32rpx;
          height: 100rpx;
          line-height: 100rpx;
          width: 450rpx;
        }
        .right_bottom{
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 60rpx;
          margin-top: 10rpx;
          padding-right: 12rpx;
          .bottom_time{
            color: #999999;
            font-size: 20rpx;
          }
          .button{
            height: 50rpx;
            width: 156rpx;
            border-radius: 50rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24rpx;
          }
          .finish{
            color: #ffffff;
            background-color: #e0e0e0;
          }
          .employ{
            color: #FF983D;
            border: 1rpx solid #FF983D;
          }
          .receive{
            background-color: #FF983D;
            color: #ffffff;
          }
        }
      }
      
    }
  }
  
  
</style>


